<template>
  <view>
    <u-navbar :autoBack="true"></u-navbar>
    <view style="margin-top: 64px;display: flex;flex-direction: column;align-items: center;">
      <view class="mt20" style="font-size: 18px;font-weight: bold;">请扫码</view>
      <template v-if="codeStr">
        <uqrcode ref="qrcode" canvas-id="qrcode" :value="codeStr"></uqrcode>
      </template>
      <view class="mt20 color">{{time}}</view>
      <!-- <view class="color">（5秒后自动刷新）</view> -->
      <view class="u-flex u-p-t-50 u-w-60">
        <view class="" @click="createQrCodeStr">
          <u-icon name="reload" size="30"></u-icon>
        </view>
        <view class="">
        </view>
      </view>
      <!-- <view class="btn">
        <div  style="color:#C4AD8C;line-height: 44px;text-align:center;">点名</div>
      </view> -->
    </view>

  </view>
</template>

<script>
  import {
    mapState,
  } from "vuex";
  import {
    getQrCodeStr,
    createTeacherClock
  } from "@/api/user.js";
  export default {
    computed: {
      ...mapState(["userType", "userId"]),
    },
    data() {
      return {
        info: {},
        codeStr: '',
        time: '',
        isHide: false,
        isClock: false
      }
    },
    onLoad(e) {
      this.info = e;
      this.getTime();
      this.createQrCodeStr()
    },
    onShow() {
      if (this.isHide) {
        this.isHide = false;
        this.getTime();
      }
    },
    onHide() {
      this.isHide = true;
    },
    onUnload() {
      this.isHide = true;
    },
    methods: {
      createQrCodeStr() {
        this.codeStr = '';
        getQrCodeStr({
          id: this.info.id
        }).then(res => {
          if (res.code) {
            return this.$u.toast(res.msg);
          }
          this.codeStr = window.location.origin + '/pages/login/index?qrCoedStr=' + res.data;
          console.log(this.codeStr)
          if (!this.isClock) {
            createTeacherClock({
              clockRemark: "",
              classesId: this.info.cId,
              clockRole: 3,
              clockType: 'hand',
              roomId: this.info.rId,
              subjectId: this.info.sId,
              weekId: this.info.wId,
              studyTimeId: this.info.stId,
              clockUserId: this.userId,
            }).then(res => {
              if (res.code == 0) {
                this.$u.toast('打卡成功');               
              } else {
                this.$u.toast(res.msg)
              }
            })
          }
        })
      },
      getTime() {
        this.time = this.$u.timeFormat(+new Date(), 'yyyy-mm-dd hh:MM:ss');
        if (this.isHide) return;
        setTimeout(() => {
          this.getTime();
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .btn {
    width: 300px;
    height: 44px;
    background: #182044;
    border-radius: 7px;
    opacity: 1;
    margin-top: 40px
  }

  .mt20 {
    margin: 20px;
  }

  .color {
    color: #C4AD8C;
  }
</style>
